<template>
   <el-card class="box-card">
    <div slot="header" class="clearfix">
    <h1 class="container-title fl">编辑用户</h1>
    </div>
    <!-- 在这里写数据 -->
    <ul class="ul">
      <li class="li"><p><font style="padding-left:20px">邮箱:</font><font>{{user.email}}</font></p></li>
      <li class="li"><p><font style="padding-left:20px">密码:</font><font>已设置</font></p></li>
      <li class="li"><p><font style="padding-left:8px">用户名:</font><font>{{user.username}}</font></p></li>
      <li class="li"><p>电话号码:<font>{{user.phone}}</font></p></li>
      <li class="li"><p><font style="padding-left:20px">权限:</font><font>{{user.role}}</font>

        <el-button type="text" @click="dialogFormVisible = true">修改</el-button>

<el-dialog title="权限" :visible.sync="dialogFormVisible">
  <el-form >
    <el-form-item label="修改权限" :label-width="formLabelWidth">
      <el-select v-model="role_id">
        <el-option v-for="role in role_list" :label="role.name" :key="role.id" :value="role.id" ></el-option>
        </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="uprole">确 定</el-button>
  </div>
</el-dialog>
      </p></li>
      
    </ul>

</el-card>
       
    </template>
    
    <script>
      import {adduser,role,upone,orole} from '../api/api'
    
        export default {
    
            data(){
                return {
                
                    user:'',
                    role_id:0,
              
                    dialogTableVisible: false,
                    dialogFormVisible: false,
      
                    formLabelWidth: '120px',
                    role_list:[],

                    
                        
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
              uprole:function(){
                var params={'username':localStorage.getItem('one'),'role_id':this.role_id}
                 orole(params).then( res => {
                 this.$Message(res.message)
                  
         
              })



              },
              get_role:function(){
                role().then(res=>{
                    this.role_list=res
                    console.log(this.role_list)
       
                    

                })

              }
         
    
            },
            //钩子方法
            mounted:function(){
              this.get_role();
              var receiveValue = this.$route.params.value
              var params={'username':receiveValue}
              upone(params).then( res => {
                  this.user=res[0]
                  localStorage.setItem('one',res.username)
                  
         
              })

    
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
    font{
      padding-left:100px;
    }
    .ul{
      width:400px;
      height:400px;
      margin-left:350px;
      margin-top:200px;

    }
    .li {
            border: solid 1px black;
            line-height:25px;
            height:60px;



        }
 .box-card-min{
    height:450px;
    width:450px;
 
    margin:0 auto;
    margin-top:30px;
    
 }
  .box-card{
        
         height:750px;

    }
    
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .container-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    color: #39486c;
  }
  .fl {
    float: left;
  }
  .inp-box {
    font-size: 16px;
    line-height: 32px;
    margin-left: 30px;
}
 
 
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .add-form {
    padding: 0;
    margin-bottom: 100px;
}

    </style>